<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>08_案例：打字游戏</title>
    <style>
      .normal {
        color: black;
      }

      .right {
        color: green;
      }

      .wrong {
        color: red;
      }

      #pChar {
        font-size: 50px;
      }
    </style>
  </head>

  <body>
    <p id="pChar"></p>
    <span id="spRet">请输入答案</span>

    <!-- 
    08_案例：打字游戏
    ·屏幕随机出现字母
    ·用户按下键盘，屏幕显示回答正确与否
    ·当用户按下ESC时游戏结束 屏幕显式GAME OVER!
    ·尝试添加计分功能（每答对一次+10 否则-10 实时显示分数）（选做）
    ·继续扩展：得分每破一百 则出字母的速度提速（选做）
     -->

    <script>
      /* 屏幕上随机出现字母 */
      // 创建字母表字符串
      var letters = "abcdefghijklmnopqrstuvwxyz";
      var letter;

      /* 找出元素 */
      var spRet = document.getElementById("spRet");

      // 随机生成序号 并取到对应的字符 显示在pChar上
      function changeLetter() {
        letter = letters[parseInt(Math.random() * 26)];
        pChar.innerText = letter;
      }
      changeLetter();

      // 给document注册keydown事件
      document.onkeydown = function (e) {
        console.log(e.key);

        // 如果用户输入了ESC 则spRet黑字显式GAME OVER!
        if (e.key === "Escape") {
          spRet.className = "normal";
          spRet.innerText = "GAME OVER!";

          // 注销键盘事件监听
          document.onkeydown = null;

          // 退出当前处理函数
          return;
        }

        // 如果e.key等于随机出现的字母 则spRet绿字显式OhappyK 继续出下一个字母
        if (e.key.toLowerCase() === letter) {
          spRet.className = "right";
          spRet.innerText = "OhappyK";
        }

        // 否则 则spRet红字显式HotChicken 继续出下一个字母
        else {
          spRet.className = "wrong";
          spRet.innerText = "HotChicken";
        }

        // 1秒后出下一个字母
        setTimeout(function () {
          changeLetter();
        }, 1000);
      };
    </script>
  </body>
</html>
